<template>
  <!-- 答题页面 -->
  <div class="answer_box">
    <!-- navbar -->
    <AnswerTitleNavbar />
    <!-- 题型 -->
    <AnswerType />
    <!-- 题 -->
    <AnswerCarousel />
    <!-- 底部栏 -->
    <AnswerBottomNav />
  </div>
  <!-- 答题卡 -->
  <AnswerSheet />
</template>

<script>
import AnswerTitleNavbar from "./component/AnswerTitleNavbar.vue";
import AnswerType from "./component/AnswerType.vue";
import AnswerCarousel from "./component/AnswerCarousel.vue";
import AnswerBottomNav from "./component/AnswerBottomNav.vue";
import AnswerSheet from "./component/AnswerSheet.vue";
import { ref } from "@vue/reactivity";
import testData from "../../../utils/testData";
import { provide } from "@vue/runtime-core";
export default {
  components: {
    AnswerTitleNavbar,
    AnswerType,
    AnswerCarousel,
    AnswerBottomNav,
    AnswerSheet,
  },
  setup() {
    // 传输数据
    const testList = ref(testData);
    provide("testList", testList);
    // 答题卡弹出框状态 及 控制
    const shortPopup = ref(false);
    provide("shortPopup", shortPopup);
    const showShortPopup = () => {
      shortPopup.value = !shortPopup.value;
    };
    provide("showShortPopup", showShortPopup);
    return { testList };
  },
};
</script>

<style lang="less" scoped>
.answer_box {
  width: 100%;
  height: 100%;
  padding: 3rem 0;
  box-sizing: border-box;
  background-color: #fff;
}
</style>
